<template>
  <div class="register">
    <el-form
    class="register-form"
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    >
      <div class="title">用户注册</div>
      <el-form-item  prop="phone">
        <el-input
          placeholder="请输入账号"
          v-model="ruleForm.phone"
          size="large"
          type="text"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item  prop="pass">
        <el-input placeholder="请输入密码" size="large" v-model="ruleForm.pass" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item  prop="name">
        <el-input
          placeholder="请输入姓名"
          v-model="ruleForm.name"
          type="text"
          size="large"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item  prop="role">
        <el-select v-model="ruleForm.role" placeholder="选择角色" size="large">
          <el-option
            v-for="item in rolelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <div class="wj">
        <span></span>
        <span @click="$router.push('/login')">登录</span>
      </div>
      <el-form-item>
        <el-button type="primary" round  size="large" @click="submitForm(ruleFormRef)">注册</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {reactive, ref,onMounted} from 'vue'
import { role_list,user_register } from '../api/index'
import {useRouter} from 'vue-router'
import { ElNotification } from 'element-plus'
import "element-plus/es/components/notification/style/css"

var $router = useRouter()
var ruleForm = reactive({phone:'',pass:'',name:'',role:''})
var ruleFormRef = ref();
var rolelist = ref([]);
onMounted( async ()=>{
  var res = await role_list();
  var arr = res.data.list.map((item)=>{
    return { label: item.name, value: item._id }
  })
  rolelist.value = arr;
})

const validatePhone = (rule, value, callback) => {
  if ( /^1[3-9]\d{9}$/.test( value ) == false ) {
    callback(new Error('请输入正确的手机号！'))
  } else {
    callback()
  }
}
const validatePass = (rule, value, callback) => {
  if ( /^\d{4}$/.test( value ) == false ) {
    callback(new Error('请输入符合要求的密码,必须是4位数字！'))
  } else {
    callback()
  }
}
const validateName = (rule, value, callback) => {
  if ( value == '' ) {
    callback(new Error('请输入姓名！'))
  } else {
    callback()
  }
}
const validateRole = (rule, value, callback) => {
  if ( value == '' ) {
    callback(new Error('请选择一个角色！'))
  } else {
    callback()
  }
}
const rules = reactive({
  phone: [{ validator: validatePhone, trigger: 'blur' }],
  pass: [{ validator: validatePass, trigger: 'blur' }],
  name: [{ validator: validateName, trigger: 'blur' }],
  role: [{ validator: validateRole, trigger: 'blur' }],
})
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate( async (valid) => { 
    if (valid) {
      var res = await user_register(ruleForm)
      alert(res.data.msg)
      if( res.data.code == 200 ){
        $router.push('/login');
      }else{
        ElNotification({
          title: '注册通知',
          message: res.data.msg,
          type: 'error',
        })
      }
    } else {
      return false
    }
  })
}
</script>

<style scoped lang='scss'>
.register{
  height: 100%;
  background-image: url(../assets/考勤管理-登录页-背景.png);
  display: flex;
  justify-content: center;
  align-items: center;
  .register-form{
    background-color: white;
    padding: 30px;
    min-width: 400px;
    border-radius: 10px;
    .title{
      margin-bottom: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
  .wj {
      display: flex;
      justify-content: space-between;
      color: #2aaaff;
      cursor: pointer;
    }
    button{
      width: 150px;
      margin: 10px auto;
    }
}

</style>